<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
		<link rel="stylesheet" type="text/css" href="sass/new_file.css" />
		<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
	</head>

	<body>
		<div id="top">
			<img src="img/161224c44393195.jpeg" alt="" />
			<div>
				<p>效果演示</p>
				<span>5分钟送到</span>
				<span>欢迎光临</span>
			</div>
			<span class="glyphicon glyphicon-chevron-right"></span>
		</div>
		<div id="box">
			<span class="nn">商品</span>
			<span>评价</span>
		</div>
		<div id="box1">
			<ul id="contrast">
				<li class="mm" id="btn1">热销榜</li>
				<li id="btn2">热销榜</li>
				<li id="btn3">热销榜</li>
				<li id="btn4">热销榜</li>
				<li id="btn5">热销榜</li>
			</ul>
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide ss">
						<div class="ll">
							<p>热销榜</p>
							<span>大家喜欢吃，才是真好吃</span>
						</div>
						<div class="lll">
							<img src="img/16131dbcf603598.jpg" alt="" />
							<div>
								<p>1</p>
								<span>1111111111111111</span>
								<span>月销6666</span>
								<div class="llll">
									<span>￥20 起</span>
									<button>ss</button>
								</div>
							</div>
						</div>
					</div>
					<div class="swiper-slide oo">
						<div class="p">
							<p>热销榜</p>
							<span>大家喜欢吃，才是真好吃</span>
						</div>
						<div class="pp">
							<img src="img/1612c1cce903420.jpg" alt="" />
							<div>
								<p>111111111111111111</p>
								<span>月销6666</span>
								<div class="ppp">
									<span>￥20 起</span>
									<button>ss</button>
								</div>
							</div>
						</div>
						<div class="pp">
							<img src="img/1612c1cce903420.jpg" alt="" />
							<div>
								<p>111111111111111111</p>
								<span>月销6666</span>
								<div class="ppp">
									<span>￥20 起</span>
									<button>ss</button>
								</div>
							</div>
						</div>
						<div class="pp">
							<img src="img/1612c1cce903420.jpg" alt="" />
							<div>
								<p>111111111111111111</p>
								<span>月销6666</span>
								<div class="ppp">
									<span>￥20 起</span>
									<button>ss</button>
								</div>
							</div>
						</div>
						<div class="pp">
							<img src="img/1612c1cce903420.jpg" alt="" />
							<div>
								<p>111111111111111111</p>
								<span>月销6666</span>
								<div class="ppp">
									<span>￥20 起</span>
									<button>ss</button>
								</div>
							</div>
						</div>
					</div>
					<div class="swiper-slide oo">
						<div class="p">
							<p>热销榜</p>
							<span>大家喜欢吃，才是真好吃</span>
						</div>
						<div class="pp">
							<img src="img/1612c1cce903420.jpg" alt="" />
							<div>
								<p>111111111111111111</p>
								<span>月销6666</span>
								<div class="ppp">
									<span>￥20 起</span>
									<button>ss</button>
								</div>
							</div>
						</div>
						<div class="pp">
							<img src="img/1612c1cce903420.jpg" alt="" />
							<div>
								<p>111111111111111111</p>
								<span>月销6666</span>
								<div class="ppp">
									<span>￥20 起</span>
									<button>ss</button>
								</div>
							</div>
						</div>
						<div class="pp">
							<img src="img/1612c1cce903420.jpg" alt="" />
							<div>
								<p>111111111111111111</p>
								<span>月销6666</span>
								<div class="ppp">
									<span>￥20 起</span>
									<button>ss</button>
								</div>
							</div>
						</div>
						<div class="pp">
							<img src="img/1612c1cce903420.jpg" alt="" />
							<div>
								<p>111111111111111111</p>
								<span>月销6666</span>
								<div class="ppp">
									<span>￥20 起</span>
									<button>ss</button>
								</div>
							</div>
						</div>
					</div>
					<div class="swiper-slide oo">
						<div class="p">
							<p>热销榜</p>
							<span>大家喜欢吃，才是真好吃</span>
						</div>
						<div class="pp">
							<img src="img/1612c1cce903420.jpg" alt="" />
							<div>
								<p>111111111111111111</p>
								<span>月销6666</span>
								<div class="ppp">
									<span>￥20 起</span>
									<button>ss</button>
								</div>
							</div>
						</div>
						<div class="pp">
							<img src="img/1612c1cce903420.jpg" alt="" />
							<div>
								<p>111111111111111111</p>
								<span>月销6666</span>
								<div class="ppp">
									<span>￥20 起</span>
									<button>ss</button>
								</div>
							</div>
						</div>
						<div class="pp">
							<img src="img/1612c1cce903420.jpg" alt="" />
							<div>
								<p>111111111111111111</p>
								<span>月销6666</span>
								<div class="ppp">
									<span>￥20 起</span>
									<button>ss</button>
								</div>
							</div>
						</div>
						<div class="pp">
							<img src="img/1612c1cce903420.jpg" alt="" />
							<div>
								<p>111111111111111111</p>
								<span>月销6666</span>
								<div class="ppp">
									<span>￥20 起</span>
									<button>ss</button>
								</div>
							</div>
						</div>
					</div>
					<div class="swiper-slide oo">
						<div class="p">
							<p>热销榜</p>
							<span>大家喜欢吃，才是真好吃</span>
						</div>
						<div class="pp">
							<img src="img/1612c1cce903420.jpg" alt="" />
							<div>
								<p>111111111111111111</p>
								<span>月销6666</span>
								<div class="ppp">
									<span>￥20 起</span>
									<button>ss</button>
								</div>
							</div>
						</div>
						<div class="pp">
							<img src="img/1612c1cce903420.jpg" alt="" />
							<div>
								<p>111111111111111111</p>
								<span>月销6666</span>
								<div class="ppp">
									<span>￥20 起</span>
									<button>ss</button>
								</div>
							</div>
						</div>
						<div class="pp">
							<img src="img/1612c1cce903420.jpg" alt="" />
							<div>
								<p>111111111111111111</p>
								<span>月销6666</span>
								<div class="ppp">
									<span>￥20 起</span>
									<button>ss</button>
								</div>
							</div>
						</div>
						<div class="pp">
							<img src="img/1612c1cce903420.jpg" alt="" />
							<div>
								<p>111111111111111111</p>
								<span>月销6666</span>
								<div class="ppp">
									<span>￥20 起</span>
									<button>ss</button>
								</div>
							</div>
						</div>
					</div>
					<div class="swiper-slide oo">
						<div class="p">
							<p>热销榜</p>
							<span>大家喜欢吃，才是真好吃</span>
						</div>
						<div class="pp">
							<img src="img/1612c1cce903420.jpg" alt="" />
							<div>
								<p>111111111111111111</p>
								<span>月销6666</span>
								<div class="ppp">
									<span>￥20 起</span>
									<button>ss</button>
								</div>
							</div>
						</div>
						<div class="pp">
							<img src="img/1612c1cce903420.jpg" alt="" />
							<div>
								<p>111111111111111111</p>
								<span>月销6666</span>
								<div class="ppp">
									<span>￥20 起</span>
									<button>ss</button>
								</div>
							</div>
						</div>
						<div class="pp">
							<img src="img/1612c1cce903420.jpg" alt="" />
							<div>
								<p>111111111111111111</p>
								<span>月销6666</span>
								<div class="ppp">
									<span>￥20 起</span>
									<button>ss</button>
								</div>
							</div>
						</div>
						<div class="pp">
							<img src="img/1612c1cce903420.jpg" alt="" />
							<div>
								<p>111111111111111111</p>
								<span>月销6666</span>
								<div class="ppp">
									<span>￥20 起</span>
									<button>ss</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		window.onload = window.onresize = function() {
			document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth / 280) + "px"
		};
		$.ajax({
			type: "GET",
			url: "js/new_file.json",
			async: true,
			dataType: "json",
			success: function(data) {

			}
		});
		var mySwiper = new Swiper(".swiper-container", {
			direction: 'vertical',
			onSlideChangeStart:function(){
				var index = mySwiper.activeIndex;
				$("ul>li").eq(index).addClass("mm").siblings().removeClass("mm");
			}
		})
		$("ul>li").click(function(){
			var _index = $(this).index();
			mySwiper.slideTo(_index);
		})
	</script>

</html>